<template>
  <BasicModal @ok="handleOk" @cancel="handleCancel" @close="handleCancel" v-bind="$attrs" @register="registerModal" title="验证手机"
              width="500px">
    <div class="steps-content">
      <a-spin :spinning="confirmLoading">
        <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-row>
            <a-col :span="24">
              <a-form-item label="手机号">
                <a-input v-model:value="formData.mobile" placeholder="请输入手机号"
                         disabled></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="验证码">
                <CountdownInput class="fix-auto-fill" v-model:value="formData.captcha"
                                placeholder="请输入手机验证码" :sendCodeApi="sendCodeApi" />
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-spin>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { defineExpose, reactive, ref } from "vue";
  import { BasicModal, useModalInner } from "/@/components/Modal";
  import { useForm } from "/@/components/Form/index";
  import { useMessage } from "/@/hooks/web/useMessage";
  import { CountdownInput } from "/@/components/CountDown";
  import { checkPhoneCode, getCaptcha } from "/@/api/sys/user";
  import { SmsEnum } from "/@/views/sys/login/useLogin";
  import { useRouter } from "vue-router";
  import { useUserStore } from "/@/store/modules/user";

  const router = useRouter();
  // 声明Emits
  const emit = defineEmits(["success","cancel"]);
  const $message = useMessage();
  const formRef = ref();
  const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
  const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
  const confirmLoading = ref<boolean>(false);
  const formData = reactive({
    mobile: "",
    captcha: "",
    id: "",
    status: undefined,
  });
  //表单配置
  const [registerForm, { resetFields, validate, clearValidate }] = useForm();
  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner();
  const userStore = useUserStore();

  async function show(id,status) {
    if (!userStore.getUserInfo.username) {
      $message.createMessage.warning("当前系统无登录用户!");
      return;
    } else {
      formData.mobile = userStore.getUserInfo.username;
      formData.id = id;
      formData.status = status;
      await setModalProps({ visible: true });
    }
  }

  //倒计时执行前的函数
  function sendCodeApi() {
    if (!formData.mobile) {
      $message.createMessage.warning("手机号码不存在!");
      return;
    }
    return getCaptcha({ mobile: formData.mobile, smsmode: SmsEnum.FORGET_PASSWORD, userType: 3,remarks: '手机号验证' });
  }

  async function handleOk() {
    if (!formData.mobile) {
      $message.createMessage.warning("手机号码不存在!");
      return;
    }
    if (!formData.captcha) {
      $message.createMessage.warning("请输入手机验证码!");
      return;
    }
    //关闭弹窗
    closeModal();
    emit("success",formData);
    // confirmLoading.value = true;
    // checkPhoneCode({ mobile: formData.mobile, captcha: formData.captcha }).then((res) => {
    //   if (res.success) {
    //     //关闭弹窗
    //     closeModal();
    //     emit("success",formData.id);
    //   } else {
    //     $message.createMessage.warning(res.message);
    //   }
    //   confirmLoading.value = false;
    // });
  }

  function handleCancel(){
    emit("cancel",formData);
  }

  defineExpose({
    show
  });
</script>
<style scoped>
.steps-content {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 30px;
}

.steps-action {
  margin-top: 24px;
  float: right;
}

[data-theme='dark'] .steps-content {
  background-color: #2f2f2f;
  border: 1px dashed #404040;
}
</style>
